<template>
  <div class="app">
    <h5>账号：</h5>
    <el-input v-model="username" placeholder="请输入手机号"></el-input>
    <h5>密码：</h5>
    <el-input v-model="password" placeholder="请输入密码"></el-input>
    <el-button @click="login" :loading="flg" class="btClass">登录</el-button>
  </div>
</template>
<script type="text/ecmascript-6">
// import captcha from "../captcha/captcha";
// import { mapMutations } from "vuex";
export default {
  data() {
    return {
      username: "2810201146@qq.com",
      password: "zhou24272592",
      checkCode: "BCAXA",
      msg: "",
      flg: false,
      loginState:false
    };
  },
  
  created: function() {
  },
  methods: {
    async login() {
      if (
        this.username.indexOf("@") != -1 ||
        this.username.indexOf(".") != -1
      ) {
        if (!this.IFemail(this.username)) return;
      } else {
        if (!this.IFphone(this.username)) return;
      }
      if (this.checkCode == "") return;
      this.flg = true;
      await this.loginApi()
      if(this.loginState==true){
        await this.get_information()
        this.$emit('loginState', this.loginState)
      }
      this.loginState = false
      this.flg = false;
    },
    async loginApi() {
      await this.$api.userAPI
        .login({ username: this.username, password: this.password })
        .then(res => {
          const data = res.data;
          console.log(data.code,data.code!=2000)
          if(data.code!=2000){
            this.$message.error('登录失败');
          }else{
            this.loginState = true
            localStorage.setItem("token", data.data.token);
          }
        })
        .catch(err => {
          
        });
    },

    async get_information(){
          await this.$api.userAPI
            .get_information()
            .then(res => {
              localStorage.setItem("user_name", res.data.data.name);
              localStorage.setItem("user_role", res.data.data.role);
            })
            .catch(err => {
              localStorage.setItem("user_information", null);
              this.$message.error("获取用户失败");
          });
    }

  },
  components: {
    // captcha: captcha
  }
};
</script>
<style >
.btClass {
  width: 100%;
  margin-top: 10px;
}
.app h5 {
  margin-top: 10px;
  margin-bottom: 10px;
}
</style>

